<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Fotostep - Profil de John Doe</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- Le styles -->
	<link href="css/bootstrap.css" rel="stylesheet">
	<style>
	body {
		padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
	}
	</style>
	<link href="css/bootstrap-responsive.css" rel="stylesheet">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
	<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->


	</head>


	<body>
		<div class="container">	
			<div class="navbar navbar-inverse navbar-fixed-top">
				<div class="navbar-inner">
					<div class="container">
						<a class="brand" href="index.html"> <img src="img/logo.png"></a>
						<div class="nav-collapse collapse">
							<ul class="nav">
								<li><a href="#">Accueil</a></li>
								<li><a href="#about">Rechercher des photos</a></li>
								<li class="active"><a href="#">Inscription</a></li>
							</ul>
							<form class="form-inline pull-right" style="display: inline; margin-bottom: 0; margin-left: 15px" method="post">
								<input type="text" placeholder="Email" class="input-small" name="login">
								<input type="password" placeholder="Mot de passe" class="input-small" name = "passwd">
								<button class="btn" type="submit" style="margin: 5px">S'identifier</button>
							</form>
						</div><!--/.nav-collapse -->
					</div>
				</div>
			</div> <!-- nav-bar-->

			
			<div class="page-header">
				<h1><img src="img/header-logo.png"/></h1>
			</div>

			<div class = "row">
				<div class="span3">					
					<div class="well sidebar-nav">
						<ul class="nav nav-list">
							<li><a href="#">Accueil</a></li>
							<li class="nav-header">Mon compte</li>
							<li><a href="#">Ajouter des photos</a></li>
							<li><a href="#">Modifier mon compte</a></li>
							<li class="active"><a href="#">Voir mon profil</a></li>
							<li class="nav-header">Mes contacts</li>
							<li><a href="#">Voir mes contacts</a></li>
						</ul>
					</div>					
				</div>

				<div class = "span9">
					<div class = "page-header">
						<h2>Gestion de mes albums <button class = "btn btn-primary pull-right"><i class = "icon-plus-sign icon-white" ></i> Nouvel album</button></h2>
						
					</div>

					<div class = "span9" id = "albums-container">
						<div class="media">
							<a class="pull-left" href="#">
									<img class="media-object align-center" src="holder.js/200x150">
							</a>
							<div class="media-body">
								<div class="btn-group pull-right">
									<button class="btn btn-danger" id="btn-close"><i class="icon-remove icon-white"></i></button>
									<button class="btn btn-info" id = "btn-edit"><i class="icon-edit icon-white"></i></button>
								</div>
								<h3 class = "media-heading">Titre de l'album</h3>
								<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
								<p>Nombre de photos : 42</p>
								<p>Confidentialité : Privé / Amis / Public </p>
							</div>
						</div>

						<div class="media">
							<a class="pull-left" href="#">
									<img class="media-object align-center" src="holder.js/200x150">
							</a>
							<div class="media-body">
								<div class="btn-group pull-right">
									<button class="btn btn-danger" id="btn-close"><i class="icon-remove icon-white"></i></button>
									<button class="btn btn-info" id = "btn-edit"><i class="icon-edit icon-white"></i></button>
								</div>
								<h3 class = "media-heading">Titre de l'album</h3>
								<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
								<p>Nombre de photos : 42</p>
								<p>Confidentialité : Privé / Amis / Public </p>
							</div>
						</div>

						<div class="media">
							<a class="pull-left" href="#">
									<img class="media-object align-center" src="holder.js/200x150">
							</a>
							<div class="media-body">
								<div class="btn-group pull-right">
									<button class="btn btn-danger" id="btn-close"><i class="icon-remove icon-white"></i></button>
									<button class="btn btn-info" id = "btn-edit"><i class="icon-edit icon-white"></i></button>
								</div>
								<h3 class = "media-heading">Titre de l'album</h3>
								<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
								<p>Nombre de photos : 42</p>
								<p>Confidentialité : Privé / Amis / Public </p>
							</div>
						</div>

					</div>
							
				</div>




			</div>

		</div>

		<footer>
			<p>&copy; Fotostep 2012</p>
		</footer>

	</div><!-- Container-->


	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/bootstrap-tabs.js"></script>
	<script src="js/holder.js"></script>
	
	<script>
	$('#profileTab a').click(function (e) {
		e.preventDefault();
		$(this).tab('show');
	})
	</script>


</body>

</html>